<template>
  <div class="app-container">
    <el-card>
      <template #header>
        <div class="card-header">
          <span>退货申请详情</span>
          <el-button @click="goBack" type="primary" plain>返回列表</el-button>
        </div>
      </template>
      <!-- 分为左右两部分，左边是申请信息，右边是详细信息 -->
      <el-row :gutter="20">
        <el-col :span="12">
          <el-card>
            <template #header>
              <span>退货申请</span>
            </template>
            <el-descriptions v-loading="loading" :column="1" border>
              <el-descriptions-item label="退货商品">
                <div>
                  <image-preview :src="serviceInfo.productImage" :width="50" :height="50" />
                  <span>{{ serviceInfo.productName }}</span>
                  <span>{{ serviceInfo.productQuantity }}</span>
                </div>
              </el-descriptions-item>
              <el-descriptions-item label="退货状态">
                <el-tag>
                  {{ getAfterSalesStatusText(serviceInfo.afterSalesStatus) }}
                </el-tag>
              </el-descriptions-item>
              <el-descriptions-item label="退货退款编号">
                {{ serviceInfo.serviceNo }}
              </el-descriptions-item>
              <el-descriptions-item label="退货退款原因">
                {{ serviceInfo.reason }}
              </el-descriptions-item>
              <el-descriptions-item label="申请退款金额" style="color: red;">
                {{ serviceInfo.applyAmount }}
              </el-descriptions-item>
              <el-descriptions-item label="退货数量">
                {{ serviceInfo.returnQuantity }}
              </el-descriptions-item>
              <el-descriptions-item label="问题描述">
                {{ serviceInfo.description }}
              </el-descriptions-item>
              <el-descriptions-item label="凭证">
                <image-preview :src="serviceInfo.evidence" :width="50" :height="50" />
              </el-descriptions-item>
            </el-descriptions>
          </el-card>

          <!-- 处理意见卡片 -->
          <el-card v-if="showProcessingOpinion" class="mt-20">
            <template #header>
              <span>处理意见</span>
            </template>
            <el-descriptions v-loading="loading" :column="1" border>
              <el-descriptions-item label="商家">
                {{ serviceInfo.sellerName }}
              </el-descriptions-item>
              <!-- 申请中状态显示完整信息 -->
              <template v-if="serviceInfo.afterSalesStatus === 1">
                <el-descriptions-item label="是否同意">
                  {{ getIsApprovedText(serviceInfo.isApproved) }}
                </el-descriptions-item>
                <el-descriptions-item label="申请退款金额">
                  {{ serviceInfo.applyAmount }}
                </el-descriptions-item>
                <el-descriptions-item label="实际退款金额">
                  <el-input v-model="serviceInfo.actualAmount" placeholder="请输入实际退款金额" />
                </el-descriptions-item>
                <el-descriptions-item label="备注信息">
                  <el-input type="textarea" v-model="serviceInfo.buyerRemark" placeholder="请输入备注信息" />
                </el-descriptions-item>
                <el-descriptions-item label="操作">
                  <el-button type="primary" @click="handleConfirm">确认</el-button>
                </el-descriptions-item>
              </template>
              <!-- 其他状态只显示备注信息 -->
              <template v-else>
                <el-descriptions-item label="备注信息">
                  {{ serviceInfo.buyerRemark || '暂无备注信息' }}
                </el-descriptions-item>
              </template>
            </el-descriptions>
          </el-card>


        </el-col>
        <el-col :span="12">
          <!-- 订单相关信息卡片 -->
          <el-card v-if="showOrderInfo">
            <template #header>
              <span>订单相关信息</span>
            </template>
            <el-descriptions v-loading="loading" :column="1" border>
              <el-descriptions-item label="订单编号">
                {{ serviceInfo.orderNo }}
              </el-descriptions-item>
              <!-- 需要显示银行信息的状态 -->
              <template v-if="showBankInfo">
                <el-descriptions-item label="银行开户行">
                  {{ serviceInfo.bankName }}
                </el-descriptions-item>
                <el-descriptions-item label="银行开户行名">
                  {{ serviceInfo.bankAccountName }}
                </el-descriptions-item>
                <el-descriptions-item label="银行卡号">
                  {{ serviceInfo.bankCardNumber }}
                </el-descriptions-item>
              </template>
            </el-descriptions>
          </el-card>

          <!-- 物流信息卡片 -->
          <el-card v-if="showLogisticsInfo" class="mt-20">
            <template #header>
              <span>物流信息</span>
            </template>
            <el-descriptions v-loading="loading" :column="1" border>
              <el-descriptions-item label="收货商家">
                {{ serviceInfo.receiverName }}
              </el-descriptions-item>
              <el-descriptions-item label="收货商家手机">
                {{ serviceInfo.receiverPhone }}
              </el-descriptions-item>
              <el-descriptions-item label="收货地址">
                {{ serviceInfo.receiverAddress }}
              </el-descriptions-item>
              <el-descriptions-item label="物流公司">
                {{ serviceInfo.logisticsCompany }}
              </el-descriptions-item>
              <el-descriptions-item label="物流单号">
                {{ serviceInfo.logisticsNo }}
              </el-descriptions-item>
              <el-descriptions-item label="操作">
                <el-button type="primary" @click="handleLogistics">查询物流</el-button>
              </el-descriptions-item>
            </el-descriptions>
          </el-card>
        </el-col>
      </el-row>
    </el-card>
  </div>
  <!-- 点击查询物流按钮弹出弹窗 -->
  <el-dialog v-model="logisticsDialogVisible" title="查询物流" width="50%">
    <el-form :model="logisticsForm" label-width="120px">
      <el-descriptions v-loading="loading" :column="1" border>
      <el-descriptions-item label="售后单号">
         {{ logisticsForm.serviceNo }} 
      </el-descriptions-item>
      <el-descriptions-item label="物流公司">
        {{ logisticsForm.logisticsCompany }}
      </el-descriptions-item>
      <el-descriptions-item label="物流单号">
        {{ logisticsForm.logisticsNo }}
      </el-descriptions-item>
    </el-descriptions>
    </el-form>
    <template #footer>
      <el-button @click="logisticsDialogVisible = false">取消</el-button>
    </template>
  </el-dialog>
</template>

<script setup name="ServiceDetail">
import { getService } from "@/api/orders/service.js"

const { proxy } = getCurrentInstance()
const route = useRoute()

const loading = ref(true)
const serviceInfo = ref({})

// 物流弹窗相关数据
const logisticsDialogVisible = ref(false)
const logisticsForm = ref({
  serviceNo: '',
  logisticsCompany: '',
  logisticsNo: ''
})

// 计算属性：是否显示处理意见
const showProcessingOpinion = computed(() => {
  const { afterSalesType, afterSalesStatus } = serviceInfo.value
  return afterSalesType && afterSalesStatus
})

// 计算属性：是否显示订单信息
const showOrderInfo = computed(() => {
  const { afterSalesType, afterSalesStatus } = serviceInfo.value
  return afterSalesType && afterSalesStatus
})

// 计算属性：是否显示银行信息
const showBankInfo = computed(() => {
  const { afterSalesType, afterSalesStatus } = serviceInfo.value
  // 退款类型且状态为2、3、8时，或退货类型且状态为6时显示银行信息
  return (afterSalesType === 2 && [2, 3, 8].includes(afterSalesStatus)) ||
    (afterSalesType === 1 && afterSalesStatus === 6)
})

// 计算属性：是否显示物流信息
const showLogisticsInfo = computed(() => {
  const { afterSalesType, afterSalesStatus } = serviceInfo.value
  // 退货类型且状态为4或6时显示物流信息
  return afterSalesType === 1 && [4, 6].includes(afterSalesStatus)
})

/** 获取售后服务详情 */
function getServiceDetail() {
  const id = route.query.id
  if (!id) {
    proxy.$modal.msgError("售后服务ID不能为空")
    goBack()
    return
  }

  loading.value = true
  getService(id).then(response => {
    serviceInfo.value = response.data
    loading.value = false
  }).catch((error) => {
    console.error('获取售后服务详情失败:', error)
    loading.value = false
    proxy.$modal.msgError("获取售后服务详情失败")
    goBack()
  })
}

/** 返回列表页 */
function goBack() {
  proxy.$router.push('/orders/service')
}

/** 售后类型文本 */
function getAfterSalesTypeText(type) {
  const typeMap = {
    '1': '退货',
    '2': '退款'
  }
  return typeMap[type] || type || '未知'
}

/** 售后类型标签类型 */
function getAfterSalesTypeTagType(type) {
  const typeMap = {
    '1': 'danger',  // 退货 - 红色
    '2': 'primary'  // 退款 - 蓝色
  }
  return typeMap[type] || ''
}

/** 售后状态文本 */
function getAfterSalesStatusText(status) {
  const statusMap = {
    '1': '申请中',
    '2': '通过售后',
    '3': '拒绝售后',
    '4': '待收货',
    '5': '确认收货',
    '6': '完成售后',
    '7': '卖家终止售后',
    '8': '买家取消售后'
  }
  return statusMap[status] || status || '未知'
}

/** 售后状态标签类型 */
function getAfterSalesStatusTagType(status) {
  const statusMap = {
    '1': 'primary',    //申请中 - 蓝色
    '2': 'info',       //通过售后 - 青色
    '3': 'danger',     //拒绝售后 - 红色
    '4': 'warning',    //待收货 - 橙色
    '5': '',           //确认收货 - 白色
    '6': 'success',    //完成售后 - 绿色
    '7': 'danger',     //卖家终止售后 - 红色
    '8': 'danger'      //买家取消售后 - 红色
  }
  return statusMap[status] || ''
}

/** 退款方式文本 */
function getRefundMethodText(method) {
  const methodMap = {
    '1': '原路退回',
    '2': '银行卡退款',
    '3': '其他'
  }
  return methodMap[method] || method || '未知'
}

/** 是否同意文本 */
function getIsApprovedText(approved) {
  const approvedMap = {
    '0': '同意',
    '1': '拒绝'
  }
  return approvedMap[approved] || approved || '未知'
}

/** 确认处理 */
function handleConfirm() {
  if (!serviceInfo.value.actualAmount) {
    proxy.$modal.msgError("请输入实际退款金额")
    return
  }

  proxy.$modal.confirm('确认提交处理意见吗？').then(() => {
    // 这里可以调用API提交处理意见
    proxy.$modal.msgSuccess("处理意见提交成功")
    goBack()
  }).catch(() => {
    // 用户取消
  })
}

/** 查询物流 */
function handleLogistics() {
  // 填充物流表单数据
  logisticsForm.value = {
    serviceNo: serviceInfo.value.serviceNo || '',
    logisticsCompany: serviceInfo.value.logisticsCompany || '',
    logisticsNo: serviceInfo.value.logisticsNo || ''
  }

  // 显示弹窗
  logisticsDialogVisible.value = true
}

// 监听路由变化
watch(() => route.query.id, (newId) => {
  if (newId) {
    getServiceDetail()
  }
})
getServiceDetail()
</script>

<style scoped>
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.text-content {
  min-height: 60px;
  line-height: 1.6;
  word-break: break-all;
  white-space: pre-wrap;
}

.mt-20 {
  margin-top: 20px;
}

.el-descriptions-item {
  padding: 12px 0;
}

.el-input {
  width: 100%;
}

.el-textarea {
  width: 100%;
}
</style>
